<template>
	<h2>计算属性与监视</h2>
	<fieldset>
		<legend>姓名操作</legend>
		姓氏：<input
			type="text"
			placeholder="请输入姓氏"
			v-model="user.firstName"
		/><br />
		名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" />
	</fieldset>
	<fieldset>
		<legend>计算属性与监视的演示</legend>
		姓名：<input type="text" placeholder="请输入姓名" v-model="fullName1" /><br />
		姓名：<input type="text" placeholder="请输入姓名" v-model="fullName2" /><br />
		姓名：<input type="text" placeholder="请输入姓名" v-model="fullName3" />
	</fieldset>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, watch, ref, watchEffect } from "vue"

export default defineComponent({
	name: "App",
	setup() {
		// 定义一个响应式对象
		const user = reactive({
			// 姓氏
			firstName: "东方",
			// 名字
			lastName: "不败"
		})

		// 计算属性实现:如果只传入一个回调函数就是get方法
		// 返回的是一个ref类型的对象---第一个姓名
		const fullName1 = computed(() => {
			return user.firstName + "_" + user.lastName
		})
		// console.log(fullName1)

		// 第二个姓名
		const fullName2 = computed({
			get() {
				return user.firstName + "_" + user.lastName
			},
			set(val: string) {
				// console.log("------", val)
				const names = val.split("_")
				user.firstName = names[0]
				user.lastName = names[1]
			}
		})

		const fullName3 = ref("")
		// 监视---监视指定的数据
		// 第三个姓名
		// watch(
		// 	user,
		// 	({ firstName, lastName }) => {
		// 		fullName3.value = firstName + "_" + lastName
		// 	},
		// 	{ immediate: true, deep: true }
		// )
		// immediate(默认执行一次watch)、deep(深度监视)

		// 监视，不需要配置immediate，默认就会执行一次
		// watchEffect(() => {
		// 	fullName3.value = user.firstName + "_" + user.lastName
		// })

		// watchEffect(() => {
		// 	const names = fullName3.value.split("_")
		// 	user.firstName = names[0]
		// 	user.lastName = names[1]
		// })

		watch([user.firstName, user.lastName], () => {
			// 这里的代码没有执行
			console.log("===")
		})

		return {
			user,
			fullName1,
			fullName2,
			fullName3
		}
	}
})
</script>

<style></style>
